<template>
  <div class="main">
    <router-view />
    <van-tabbar
      v-model="active"
      active-color="#05a1f4"
      inactive-color="#999999"
      route
    >
      <van-tabbar-item v-for="(item, i) in tabbarData" :key="i" :to="item.to" :badge="item.badge">
        <span>{{ item.title }}</span>
        <template #icon="props">
          <img :src="props.active ? item.icon.active : item.icon.inactive" />
        </template>
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
export default {
  name: "Mian",
  components: {},
  data() {
    return {
      active: 0,
    };
  },
  created(){
    this.getShopbagCount()
  },
  computed: {
    ...mapState(["shopbagCount", "isLoadShopbagCount"]),
    tabbarData() {
      return [
        {
          title: "首页",
          icon: {
            active: require("../assets/img/首页-active.png"),
            inactive: require("../assets/img/首页.png"),
          },
          to: "/",
        },
        {
          title: "点单",
          icon: {
            active: require("../assets/img/点单-active.png"),
            inactive: require("../assets/img/点单.png"),
          },
          to: "/menu",
        },
        {
          title: "购物车",
          icon: {
            active: require("../assets/img/购物车-active.png"),
            inactive: require("../assets/img/购物车.png"),
          },
          to: "/shopping",
          badge: this.shopbagCount,
        },
        {
          title: "我的",
          icon: {
            active: require("../assets/img/my-active.png"),
            inactive: require("../assets/img/my.png"),
          },
          to: "/my",
        },
      ];
    },
  },
  methods:{
        //mutations
    ...mapMutations(['changeShopbagCount', 'changeIsLoadShopbagCount']),
    //等价于
    // changeShopbagCount(data) {
    //   this.$store.commit('changeShopbagCount', data)
    // },

    //获取购物袋的数目(不是商品总数量)
    getShopbagCount() {

      if (this.isLoadShopbagCount) {
        console.log('Main 已经加载过购物袋数量, 不再请求');
        return;
      }

      let tokenString = this.$cookies.get("tokenString");
      // console.log("tokenString ==> ", tokenString);

      if (!tokenString) {
        console.log("浏览器token不存在");
        return;
      }

      this.$toast.loading({
        message: "加载中...",
        forbidClick: true,
        duration: 0,
      });

      this.axios({
        //请求方式
        method: "GET",
        url: this.baseUrl + "/shopcartRows",
        params: {
          appkey: this.appkey,
          tokenString,
        },
      })
        .then((res) => {
          // console.log("res getShopcartCount ==> ", res);
          this.$toast.clear();

          //没有登录
          if (res.data.code == 700) {
            return;
          }

          if (res.data.code === 8000) {
            //提交changeShopbagCount的mutations
            this.changeShopbagCount(res.data.result);
            // console.log('this.shopbagCount ==> ', this.shopbagCount);
            this.changeIsLoadShopbagCount(true);
          }
        })
        .catch((err) => {
          this.$toast.clear();
          console.log("err ==> ", err);
        });
    },
  }
};
</script>